這幾天我都在專注完成一個小但關鍵的功能：飲食紀錄介面。
這功能聽起來普通，但它是整個健身 APP 的靈魂之一。

因為如果你想讓 AI 幫你分析營養、預測熱量、生成飲食建議，那前提就是——你得先願意記錄。
而讓人願意打開 APP、真的去記錄的關鍵，不是功能多，而是「夠輕鬆」。

為什麼我重做飲食紀錄介面？

前一版的介面太像表單。
雖然該有的欄位都有，但用起來就像在報稅。
輸入餐點名稱、熱量、營養素、價錢、心得……
光是想到就懶得打開。

我後來仔細想：

其實我們在現實生活中也不會先打字寫下「我吃了雞胸肉 150g」，
我們第一件事是拍照，然後發 IG。

於是我乾脆讓這個介面設計思路變成——
「讓使用者感覺像在發限動一樣自然。」

UI 設計理念：乾淨、柔和、無壓力

整體配色延續我在健康紀錄系列裡的一致風格：
以白底＋淡綠漸層，營造清新與健康感。

餐次選擇

上方的四個餐次按鈕是整個 UI 的核心節奏：
🌅 早、🌞 午、🌙 晚、🍎 點心。
使用 emoji 讓使用者一眼辨識，也多了一點生活感。
當前選中的餐次會以淡綠框線顯示，視覺上很輕盈。

食物上傳區

在中間區塊，用虛線框圍出「上傳照片」區。
我特地加上了「📷 點擊下方按鈕上傳」的提示，
讓使用者一打開就知道該往哪裡點。

這裡的核心概念是：

先拍照，不用想太多。
等等有空，再慢慢補上細節。

我希望它不像記帳那樣嚴肅，而是一種生活紀錄。

功能說明：拍照、心得、價錢一頁完成

上傳區下面是幾個選填欄位：

• 餐點照片（選填）
• 價錢
• 付款方式
• 餐點心得

這些欄位我一開始想過要不要全部強制填寫，
但後來想想，真正的「日常使用」應該要隨意但有連續性。
有時候只是想記錄照片，不想打字；
有時候反而想輸入心得，但沒有照片。
所以我把所有欄位都變成可選填，
只要按「保存記錄」就能立即存起來。

總覽頁面：讓一天的飲食變得有溫度

另一個重點是「飲食紀錄總覽」的視覺設計。
這一頁我希望呈現出「生活的一天」，
就像你在滑自己的飲食相簿一樣。

每個餐次會自動產生一張卡片：
上方顯示時間、熱量與三大營養素（蛋白質、碳水、脂肪）。
下方則是那餐的照片。
我特別做了色彩區分——
早餐是橘色、午餐是綠色、晚餐是藍紫色，
讓整天的紀錄視覺上更有節奏。

數據呈現

每張卡片右上角會顯示該餐的總熱量，
底部則以小標籤方式顯示營養素。
例如：

蛋白 37.8g 碳水 48.8g 脂肪 23.9g

這樣使用者不需要點開詳細頁就能快速掌握當天攝取狀況。
上方的統計列也會自動累積出全日總熱量與宏量分布。

技術細節小記

這個頁面我主要用 React + NativeBase 來實作，
透過 hook 來管理狀態。
每當使用者新增或刪除餐點時，Redux 會即時更新畫面。

上傳照片的部分目前先串接 S3 API，
未來會再加上壓縮與壓模組，
讓圖片上傳更快，也節省使用者流量。

資料結構則分成：

{   mealType: 'lunch', 
    time: '12:05', 
    photoUrl: '...', 
    items: [ 
        { name: '炒飯', 
        calories: 300, 
        protein: 8, 
        carb: 45, 
        fat: 10 } ], 
    price: 120, 
    payment: '悠遊卡', 
    note: '今天吃得太油了' 
} 

這樣後端在分析的時候就能直接統計每餐的熱量與營養比。

下一步計畫：讓 AI 幫你算出你吃了什麼

介面完成只是第一步。
接下來我準備加入 AI 食物辨識功能。

未來使用者只要上傳照片，
AI 就能自動辨識出餐點內容、估算熱量與三大營養素。
我會先用 Vision Transformer + 食物資料集 來做初版，
再搭配 OpenAI 的多模態 API 進行優化。

長遠來看，這會是整個「AI 健康助理」的重要基礎。
讓使用者不用手動輸入，
AI 就能幫忙完成 80% 的記錄工作。

一點開發後記

做這個介面的過程，其實是一種取捨。
在開發者眼中，我可以塞很多功能進去：
例如營養素自動分析、食材搜尋、食譜建議……
但那樣反而會讓使用者不想用。

我後來決定先從「最自然的行為」開始——拍照。
這也是我整個健身 APP 的設計哲學：

讓使用者做的每件事，都像在使用社群軟體那樣輕鬆，
而不是像填報表那樣煩躁。